<template>
  <view class="tab">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="tab-item"
      @click="switchTab(item, index)"
    >
      <image
        class="tab_img"
        :src="currentIndex == index ? item.selectedIconPath : item.iconPath"
      ></image>
      <!-- :style="{color: currentIndex == index ? selectedColor : color}" -->
      <view class="tab_text">{{ item.text }}</view>
      <!-- <image src="../../static/img" mode=""></image> -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    selectedIndex: {
      // 当前选中的tab index
      default: 0
    }
  },
  data() {
    return {
      color: '#666666',
      selectedColor: '#00BAB2',
      list: [],
      currentIndex: ''
    }
  },
  created() {
    this.currentIndex = this.selectedIndex
    let _this = this
    //角色1
    _this.list = [
      {
        pagePath: '/other_center/salesman-order-grabbing/salesman-order-grabbing',
        iconPath: '/static/img/ft_icon1@2x.png',
        selectedIconPath: '/static/img/ft_icon1.1@2x.png',
        text: '抢单'
      },
      {
        pagePath: '/other_center/salesman-center/salesman-center',
        iconPath: '/static/img/wd1@2x.png',
        selectedIconPath: '/static/img/wd2@2x.png',
        text: '我的'
      }
    ]
    // if (uni.getStorageSync('identify') == 'tom') {

    // }
  },
  methods: {
    switchTab(item, index) {
      console.log(item, index)
      //this.currentIndex = index;
      let url = item.pagePath
      uni.redirectTo({ url: url })
    }
  }
}
</script>

<style lang="scss">
.tab {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
  z-index: 9999999;
  .tab-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .tab_img {
      width: 60rpx;
      height: 60rpx;
    }
    .tab_text {
      font-size: 30rpx;
      margin-top: 9rpx;
    }
  }
}
</style>
